<template>
  <scroll-view class="home" scroll-y :show-scrollbar="false" enhanced>
    <swiper
      indicator-dots
      indicator-color="#fff"
      indicator-active-color="#00cc99"
      autoplay
      circular
    >
      <swiper-item v-for="banner in bannerList" :key="banner.id">
        <navigator :url="banner.linkUrl">
          <image :src="banner.imageUrl" mode="widthFix" class="banner-img" />
        </navigator>
      </swiper-item>
    </swiper>

    <div class="home-container">
      <div class="nav-list">
        <div v-for="(nav, index) in navList" :key="index" class="nav-item">
          <image class="nav-img" :src="nav.src" mode="widthFix" />
          <span class="nav-name">{{ nav.name }}</span>
        </div>
      </div>

      <XCard title="热门课程" more="全部课程">
        <div v-for="course in courseList" :key="course.id" class="course-item">
          <image class="course-img" :src="course.cover" mode="scaleToFill">
          </image>
          <div class="course-title els">{{ course.title }}</div>
          <div>
            <uni-icons type="fire" size="18" color="red"></uni-icons>
            <span class="course-text">{{ course.viewCount }}人已学习</span>
          </div>
          <div>
            <span class="course-price">￥{{ course.price }}</span>
            <span class="course-text">{{ course.buyCount }}人购买</span>
          </div>
        </div>
      </XCard>
    </div>
  </scroll-view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { getHomeBannerListApi, getHomeDataListApi } from "@/api/home";
import type {
  BannerList,
  TeacherList,
  CourseList,
} from "@/api/models/homeModels";
import XCard from "@/components/x-card/x-card.vue";

// 轮播图
const bannerList = ref<BannerList>([]);

onShow(async () => {
  const res = await getHomeBannerListApi();
  bannerList.value = res.bannerList;
});

// 导航分类
const navList = ref([
  {
    src: "https://p.qpic.cn/qqconadmin/0/f310ebac024349818a459aa1f5413042/0",
    name: "后台开发",
  },
  {
    src: "https://p.qpic.cn/qqconadmin/0/38e56d79465841839852e652661d507a/0",
    name: "前端开发",
  },
  {
    src: "https://p.qpic.cn/qqconadmin/0/c5f85eeb180149f7b2f1a1e6894f8df9/0",
    name: "云计算",
  },
  {
    src: "	https://p.qpic.cn/qqconadmin/0/e7c8a2649635424ab82faad7fa9b2c3a/0",
    name: "大数据",
  },
  {
    src: "https://p.qpic.cn/qqconadmin/0/9b248c95c0c44301b4155d9ac173c9a1/0",
    name: "全部分类",
  },
]);

// 课程和教师
const courseList = ref<CourseList>([]);
const teacherList = ref<TeacherList>([]);

onShow(async () => {
  const res = await getHomeDataListApi();
  courseList.value = res.courseList;
  teacherList.value = res.teacherList;
});
</script>

<style scoped lang="scss">
.home {
  height: 100vh;
}

.banner-img {
  width: 100%;
}

.home-container {
  padding: 0 20rpx;
}

.nav-list {
  display: flex;
  margin: 10rpx 0;
}

.nav-item {
  width: 20%;
  height: 150rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.nav-img {
  width: 70rpx;
}

.nav-name {
  font-size: 26rpx;
}

.course-item {
  width: 345rpx;
  background-color: #eee;
  margin-bottom: 20rpx;
  border-radius: 20rpx;
  overflow: hidden;
  padding-bottom: 10rpx;
}

.course-img {
  width: 100%;
  height: 200rpx;
}

.course-title {
  font-weight: 700;
  margin-top: 10rpx;
}

.course-text {
  font-size: 26rpx;
  margin-left: 10rpx;
}

.course-price {
  color: red;
  font-weight: 700;
}
</style>
